<template>
  <div class="app-container">
    <div class="top">
      <div class="operate">
        <el-button
          v-hasPermi="['changeShiftsMgmt:shiftHandover:shift']"
          type="primary"
          size="small"
          :disabled="!isLineCharger || !allowShift"
          @click="handleShift"
          >交班</el-button
        >
      </div>
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px"
        class="search"
      >
        <!-- <el-form-item style="margin-right:0;"> -->
        <organizationCascader
          class="organization-cascader"
          :clearData="{
            factory: true,
            workshop: true,
            line: true,
          }"
          :arrData="queryParams"
          :isAllList="true"
          @change="queryParamsChange"
        ></organizationCascader>
        <!-- </el-form-item> -->
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="Table"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      height="calc(100% - 44px - 50px)"
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="班组" prop="groupName">
        <template slot-scope="{ row }">
          <el-button type="text" @click.stop="handleDetail(row)">{{
            row.groupName
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="班次" prop="classesName"> </el-table-column>
      <el-table-column
        label="交班负责人"
        prop="handoverManagerRealName"
      ></el-table-column>
      <el-table-column label="生产日期" prop="produceDate"></el-table-column>
      <!-- <el-table-column label="所属工厂" prop="factoryDeptName">
      </el-table-column> -->
      <el-table-column label="所属车间" prop="workshopName"> </el-table-column>
      <el-table-column label="所属产线" prop="lineName" min-width="130">
      </el-table-column>
      <el-table-column label="上班班组" prop="preProduceGroupName">
      </el-table-column>
      <el-table-column
        label="上班生产日期"
        prop="preProduceDate"
      >
      </el-table-column>
      <el-table-column
        label="操作时间"
        prop="lastOpTime"
        min-width="140"
      ></el-table-column>
      <el-table-column label="状态" prop="status">
        <template slot-scope="{ row }">
          <span :class="'status-' + row.status">{{
            statusMap[row.status]
          }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="pager.total"
      :page.sync="pager.pageNum"
      :limit.sync="pager.pageSize"
      @pagination="getList"
    />
    <shiftDialog
      :visible.sync="shiftDialog.visible"
      :group="shiftDialog.group"
      @refresh="getList"
    ></shiftDialog>

    <!-- 查看详情 -->
    <GroupDetailDialog
      :visible.sync="groupDetailDialog.visible"
      :group="groupDetailDialog.group"
    ></GroupDetailDialog>
  </div>
</template>
<script>
import {
  getProduceList,
  getUserChargedLineAndGroup,
} from "@/api/shifts/turnOnDuty";
import { mapGetters } from "vuex";
import shiftDialog from "./shiftDialog.vue";
import organizationCascader from "@/views/components/organizationCascader";
import GroupDetailDialog from "../components/groupDetailDialog.vue";
export default {
  name: "ShiftHandover",
  components: { shiftDialog, organizationCascader, GroupDetailDialog },
  dicts: ["takeAndHandStatus"],
  data() {
    return {
      queryParams: {
        factoryDeptCode: null,
        workshopCode: null,
        workshopId: null,
        lineId: null,
        status: "PREPARE,PRODUCING,HANDOVERED",
      },
      list: [],
      allowShift: null,
      isLineCharger: false, //是否产线负责人
      loading: false,
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      shiftDialog: {
        visible: false,
        group: null,
      },
      // 查看详情
      groupDetailDialog: {
        visible: false,
        group: null,
      },
    };
  },
  computed: {
    ...mapGetters(["branchcode"]),
    statusMap() {
      return this.dictToMap(this.dict.takeAndHandStatus);
    },
  },
  created() {
    // 默认获取第一个工厂-车间-产线
    const results = this.getOwnFirstLine();
    this.queryParams.factoryDeptCode = results[0]?.factoryDeptCode || "";
    this.queryParams.workshopCode = results[1]?.workshopCode || "";
    this.queryParams.workshopId = results[1]?.workshopId || "";
    this.queryParams.lineId = results[2]?.lineId || "";
    // 获取列表数据
    this.getList();
    // 判断登陆人是否为产线负责人
    getUserChargedLineAndGroup().then((res) => {
      this.isLineCharger = !!res?.data?.userChargedLines?.length;
    });
  },
  methods: {
    handleSelectionChange(selection) {
      // 勾选一项且状态为“生产中”或“已交班”，才能点击交班
      if (
        selection.length == 1 &&
        ["PRODUCING", "HANDOVERED"].includes(selection[0].status)
      ) {
        this.allowShift = true;
      } else {
        this.allowShift = false;
      }
    },
    getList() {
      this.loading = true;
      const { pageNum, pageSize } = this.pager;
      const { factoryDeptCode, workshopId, lineId, status } = this.queryParams;
      const param = {
        query: {
          factoryDeptCode,
          workshopId,
          lineId,
          status,
        },
        pageNum,
        pageSize,
      };
      getProduceList(param)
        .then((res) => {
          this.list = res?.rows || {};
          this.pager.total = res?.total || 0;
          this.loading = false;
        })
        .catch(() => {
          this.list = [];
          this.pager.total = 0;
          this.loading = false;
        });
    },
    queryParamsChange({ factoryDeptCode, workshopCode, workshopId, lineId }) {
      this.queryParams.factoryDeptCode = factoryDeptCode;
      this.queryParams.workshopCode = workshopCode;
      this.queryParams.workshopId = workshopId;
      this.queryParams.lineId = lineId;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        factoryDeptCode: null,
        workshopCode: null,
        workshopId: null,
        lineId: null,
        status: "PREPARE,PRODUCING,HANDOVERED",
      };
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleShift() {
      const selection = this.$refs.Table.selection;
      if (selection?.length !== 1) {
        return;
      }
      this.shiftDialog.visible = true;
      this.shiftDialog.group = selection[0];
    },
    handleDetail(row) {
      this.groupDetailDialog.group = row;
      this.groupDetailDialog.visible = true;
    },
  },
};
</script>
<style lang="scss" scoped>
@import url("../styles/index.scss");
.top {
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  .search {
    white-space: nowrap;
  }
}
::v-deep .organization-cascader {
  display: inline-block;
  vertical-align: middle;
  color: #cccccc;
  .el-form-item {
    margin-bottom: 0;
    .el-form-item__content {
      width: 180px;
    }
  }
}
.pagination-container {
  margin: 0;
}
</style>
